
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>纯CSS3带遮罩的弹出层插件DEMO演示</title>
  <!-- 第二步：css样式 -->
    <style>
        html, body {
        font-family: 'Raleway', sans-serif;
        font-size: 16px;
        padding: 0px;
        margin: 0px;
        }

        @media screen and (max-width: 768px) {
        html, body {
            font-size: 12px;
        }
        }
        .container {
        background-color: #ff6600;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        }

        .button {
        text-decoration: none;
        font-size: .875rem;
        font-weight: 300;
        text-transform: uppercase;
        display: inline-block;
        border-radius: 1.5rem;
        background-color: #fff;
        color: #9191E9;
        padding: 1rem 2rem;
        }

        .popup {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        width: 100vw;
        height: 100vh;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 2;
        visibility: hidden;
        opacity: 0;
        overflow: hiden;
        transition: .64s ease-in-out;
        }

        .popup-inner {
        position: relative;
        display: flex;
        align-items: center;
        max-width: 800px;
        max-height: 600px;
        width: 60%;
        height: 80%;
        background-color: #fff;
        transition: .64s ease-in-out;
        }
    
        /* 触发#popup后，popup遮罩层显示出来 */
        .popup:target {
        visibility: visible;
        opacity: 1;
        }

        .popup__close {
        position: absolute;
        right: -1rem;
        top: -1rem;
        width: 3rem;
        height: 3rem;
        font-size: .875rem;
        font-weight: 300;
        border-radius: 100%;
        background-color: #0A0A0A;
        z-index: 4;
        color: #fff;
        line-height: 3rem;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        }

    </style>
</head>
<body>
  <!-- 第一步：按钮和遮罩层的html布局 
    这里打开按钮，加一个锚点伪元素
    #popup对应<div class="popup" id="popup">
    可以使用 :target 接受到点击事件
    并操作对应的 DOM 了-->
  <div class="container">
  <a class="button" href="#popup">打开</a>
  <div class="popup" id="popup">
    <div class="popup-inner">
        <div style="width: 100%; text-align: center;">
        内容
        </div>
        <!-- 关闭按钮， 去掉锚点#popup就可以关闭层-->
        <a class="popup__close" href="#">X</a>
    </div>
  </div>
</div>
</body>
</html>
